✨ Username Validation & Lobby Architecture Refactor

Summary

This release adds comprehensive username validation (3-12 characters) with real-time visual feedback and completely refactors the lobby page following proper atomic component architecture patterns.

New Features

• ✨ Username Length Validation: Enforced 3-12 character limit on both backend and frontend
• 🎨 Visual Validation Feedback: Real-time check/cross indicators with color-coded feedback
• 🏗️ Lobby Architecture Refactor: Complete rewrite with atomic, memoized components
• ⚡ Performance Improvements: Component memoization reduces unnecessary re-renders

Bug Fixes

• 🐛 Security: Backend validation prevents localStorage manipulation exploits

Technical Changes

Backend (3 files)

• Created apps/api/libs/shared/src/constants/username.ts - Shared username length constants
• Updated apps/api/libs/shared/src/constants/index.ts - Export username constants
• Updated apps/api/src/game/dto/join-room.dto.ts - Validation 3-12 characters (local constants for decorator compatibility)

Frontend (10 files)

New Components:

• Created features/settings/components/username-validation-feedback.component.tsx - Reusable validation feedback with check/cross icons
• Created features/lobby/components/create-lobby-form.component.tsx - Atomic create lobby form
• Created features/lobby/components/join-lobby-form.component.tsx - Atomic join lobby form
• Created features/lobby/components/lobby-divider.component.tsx - Memoized divider component
• Created features/lobby/components/index.ts - Barrel exports

Refactored:

• Updated features/settings/components/username-input-modal.component.tsx - Integrated validation feedback
• Updated app/settings/page.tsx - Integrated validation feedback
• Updated app/lobby/page.tsx - Reduced from 134 → 28 lines (-78% code reduction)

Architecture Improvements:

• ✅ Followed features/ module pattern from AGENTS.md
• ✅ All components memoized with React.memo()
• ✅ Kebab-case naming convention enforced
• ✅ Props interfaces with I prefix
• ✅ Barrel exports pattern
• ✅ Atomic component design

UX Improvements:

• Real-time validation feedback with icons
• Dynamic color changes (gray → green/red)
• Layout stability with invisible/visible pattern
• Removed maxLength to allow validation detection

Testing

• ✅ Username validation works on frontend (3-12 chars)
• ✅ Backend rejects usernames < 3 or > 12 chars
• ✅ Visual feedback updates in real-time
• ✅ Lobby components render correctly
• ✅ No layout shifts when validation appears
• ✅ Memoization prevents unnecessary re-renders
• ✅ All components follow naming conventions

Version

2.3.1 → 2.3.2

Breaking Changes

None. This is a backward-compatible patch release.

Ready to merge 🚀